<template>
  <div class="photo-list-container">
    <div class="album-header">
      <!-- <el-button type="primary" @click="$router.back()" icon="el-icon-arrow-left">返回</el-button> -->
      <h2>{{ albumInfo.name || '相册' }}</h2>
      <div class="album-desc">{{ albumInfo.description }}</div>
      <div class="album-meta">
        <span>
          <el-icon><el-icon-user /></el-icon>
          {{ albumInfo.userName || '未知' }}
        </span>
        <span>
          <el-icon><el-icon-date /></el-icon>
          {{ formatDate(albumInfo.createdAt) }}
        </span>
        <span>
          <el-icon><el-icon-picture /></el-icon>
          共 {{ photoList.length }} 张
        </span>
      </div>
    </div>
    <div class="photo-masonry">
      <div class="photo-item" v-for="(photo, idx) in photoList" :key="photo.id" @click="previewPhoto(idx)">
        <img :src="photo.url" :alt="photo.name" />
        <div class="photo-mask">
          <el-icon><el-icon-zoom-in /></el-icon>
        </div>
      </div>
    </div>
    <!-- 图片预览弹窗 -->
    <transition name="fade">
      <div class="photo-preview-modal" v-if="showPreview" @click="showPreview = false">
        <img :src="photoList[previewIndex]?.url" class="preview-img" @click.stop />
        <div class="preview-nav">
          <el-button @click.stop="prevPhoto" :disabled="previewIndex === 0"
            circle><el-icon><el-icon-arrow-left /></el-icon></el-button>
          <el-button @click.stop="nextPhoto" :disabled="previewIndex === photoList.length - 1"
            circle><el-icon><el-icon-arrow-right /></el-icon></el-button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElIcon } from 'element-plus'
import {
  Picture as ElIconPicture,
  User as ElIconUser,
  Calendar as ElIconDate,
  ZoomIn as ElIconZoomIn,
  ArrowLeft as ElIconArrowLeft,
  ArrowRight as ElIconArrowRight,
} from '@element-plus/icons-vue'

// 假设有 getAlbumPhotos, getAlbumInfo 两个接口
import { fetchPhotoList } from '@/service/module/album'

const route = useRoute()
const albumId = route.params.id

const albumInfo = ref({})
const photoList = ref([])

const showPreview = ref(false)
const previewIndex = ref(0)

const fetchData = async () => {
  // albumInfo.value = await getAlbumInfo(albumId)
 const res = await fetchPhotoList(albumId)
  photoList.value = res.list

}
onMounted(fetchData)

function formatDate(dateStr) {
  if (!dateStr) return ''
  const d = new Date(dateStr)
  return d.toLocaleDateString()
}

function previewPhoto(idx) {
  previewIndex.value = idx
  showPreview.value = true
}
function prevPhoto() {
  if (previewIndex.value > 0) previewIndex.value--
}
function nextPhoto() {
  if (previewIndex.value < photoList.value.length - 1) previewIndex.value++
}
</script>

<style lang="scss" scoped>
.photo-list-container {
  padding: 32px 5vw 0 5vw;
  min-height: 100vh;
  padding-top: var(--header-height);
  /* background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%); */
}

.album-header {
  margin-bottom: 32px;

  h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin: 12px 0 8px 0;
    text-shadow: 0 2px 8px #e0e7ff;
  }

  .album-desc {
    color: #666;
    margin-bottom: 8px;
  }

  .album-meta {
    display: flex;
    gap: 24px;
    font-size: 1rem;
    color: #6366f1;

    span {
      display: flex;
      align-items: center;
      gap: 4px;
    }
  }
}

.photo-masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

.photo-item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.10);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.3s;

  img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform 0.4s, filter 0.4s;
    border-radius: 14px;
  }

  .photo-mask {
    position: absolute;
    inset: 0;
    background: rgba(60, 60, 100, 0.18);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;

    el-icon {
      font-size: 2.2rem;
      color: #fff;
      text-shadow: 0 2px 8px #6366f1;
    }
  }

  &:hover {
    transform: scale(1.06) rotate(-1deg);
    box-shadow: 0 8px 32px #6366f1aa;

    img {
      filter: brightness(1.08) saturate(1.2);
      transform: scale(1.08) rotate(2deg);
    }

    .photo-mask {
      opacity: 1;
    }
  }
}

.photo-preview-modal {
  position: fixed;
  inset: 0;
  background: rgba(30, 41, 59, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  .preview-img {
    max-width: 80vw;
    max-height: 80vh;
    border-radius: 18px;
    box-shadow: 0 8px 40px #6366f1;
    animation: preview-pop 0.5s cubic-bezier(.34, 1.56, .64, 1);
    background: #fff;
  }

  .preview-nav {
    position: absolute;
    left: 50%;
    bottom: 8vh;
    transform: translateX(-50%);
    display: flex;
    gap: 32px;

    .el-button {
      font-size: 1.5rem;
      background: #fff;
      color: #6366f1;
      border: none;
      box-shadow: 0 2px 8px #6366f1;

      &:hover {
        background: #6366f1;
        color: #fff;
      }
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

@keyframes preview-pop {
  0% {
    transform: scale(0.6) rotate(-10deg);
    opacity: 0;
  }

  80% {
    transform: scale(1.08) rotate(2deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
</style>